<template>
    <div class="horoscope">
        <ul class="import">
            <li>
                <span class="f28">真实姓名</span>
                <input type="text" placeholder="请输入姓名" v-model="namea">
            </li>
            <li>
                <span class="f28">性别</span>
                <p @click="openSex(true, sex)">{{sex}}</p>
            </li>
            <li> <!-- @click="openPicker" -->
                <span class="f28">出生日期</span>
                <p>{{pickerValue1}}</p>
                <div class="dizhi">
                    <datetime
                        placeholder="请输入你的出生日期"
                        :value="pickerValue1"
                        @on-change="change"
                    ></datetime>
                </div>
            </li>
            <li @click="openTime(true)">
                <span class="f28">出生时辰</span>
                <p>{{birthVal}}</p>
            </li>
            <li @click="opensite(true)">
                <span class="f28">出生地点</span>
                <p>{{addTit}}</p>
                <div v-if="isSite" class="dizhi">
                    <x-address 
                        :hide-district="false"
                        @on-hide="logHide" 
                        @on-show="logShow" 
                        :title="addTit"
                        :list="addressData" 
                        @on-shadow-change="onShadowChange"
                        placeholder="请输入你的出生地点" 
                        :show.sync="showAddress" 
                        :raw-value="true">
                    </x-address>
                </div>
            </li>
        </ul>
        <!-- <mt-datetime-picker
            ref="picker"
            type="date"
            v-model="pickerValue"
            :start-date="startDate"
            :end-date="endDate"
            @confirm="handleConfirm">
        </mt-datetime-picker> -->
        <mt-popup
            v-model="popupVisible"
            position="bottom">
            <div class="timeData">
                <p>
                    <span @click="openTime(false)">取消</span>
                    <span @click="openTime(false)">确定</span>
                </p>
                <mt-picker
                    :slots="slots"
                    @change="onValuesChange">
                </mt-picker>
            </div>
        </mt-popup>
        <mt-popup
            v-model="isSex"
            position="bottom">
            <div class="sexData">
                <p class="f30">请选择性别</p>
                <ul>
                    <li class="f28" v-for="(va, ind) in sexArr" :key="ind" @click="openSex(false, va)">{{va}}</li>
                </ul>
            </div>
        </mt-popup>
        <div class="site" v-if="true">
        </div>
        <!-- <softkeybord ref='keyboard'></softkeybord> -->
        <div class="preserve">
            <button class="f32" @click="newCont()">保存</button>
            <p class="f24">以上信息我们会绝对保密，请你放心填写</p>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import { XAddress, ChinaAddressV4Data } from 'vux'
    import { Popup, Picker, DatetimePicker } from 'mint-ui'
    import 'mint-ui/lib/style.css'
    Vue.component(Popup.name, Popup);
    Vue.component(Picker.name, Picker);
    Vue.component(DatetimePicker.name, DatetimePicker);
    export default {
        name: 'horoscope',
        components:{
            XAddress,
        },
        data() { 
            return {
                pickerValue: '1990-1-1',
                pickerValue1: '请选择出生日期',
                pickerVisible: '2018-10-24',
                value: '2018-10-24',
                startDate: new Date('1900-1-1'),
                endDate: new Date(),
                slots: [
                    {
                        flex: 1,
                        values: ['不清楚', '00:00-00:59', '01:00-01:59', '02:00-02:59', '03:00-03:59', '04:00-04:59', '05:00-05:59', '06:00-06:59', '07:00-07:59', '08:00-08:59', '09:00-09:59', '10:00-10:59', '11:00-11:59', '12:00-12:59', '13:00-13:59', '14:00-14:59', '15:00-15:59', '16:00-16:59', '17:00-17:59', '18:00-18:59', '19:00-19:59', '20:00-10:59', '21:00-21:59', '22:00-22:59', '23:00-23:59', '24:00-24:59'],
                        className: 'slot1',
                        textAlign: 'center',
                        fontSize: '32'
                    }, 
                ],
                isTime: false,
                birthVal: '请选择出生时辰',
                birthVal1: '',
                sex: '请选择性别',
                sexArr: ['男', '女'],
                isSex: false,
                popupVisible: false,
                isSite:false,
                siteVal: '',
                provinceData: [],
                province: [],
                city: ['', ''],
                cityData: [],
                siteId: '110000',
                addressData: ChinaAddressV4Data,
                valueName: '',
                showAddress: true,
                vals: [],
                hide: false,
                addTit: '请选择出生地点',
                namea: '',
                cityId: '',
            }
        },
        methods:{
            openPicker() {
                this.$refs.picker.open()
            },
            openTime(bool) {
                this.isTime = bool
                this.popupVisible = bool
                if(!bool) {
                    this.birthVal = this.birthVal1
                }
                event.stopImmediatePropagation()
            },
            openSex(bool, val) {
                this.isSex = bool
                this.sex = val
                event.stopImmediatePropagation()
            },
            onShadowChange (ids, names) {
                this.cityId = ids;
                if(names[1] == '市辖区'){
                    this.addTit = names[0] + ' ' + names[0]
                } else {
                    this.addTit = names.slice(0,2).join(' ')
                }
                let addArr = this.addTit.split(' ');
                this.provinceData.map((item, val) => {
                    if(addArr[0] == item.areaName) {
                        this.siteId = item.areaId
                    }
                })
            },
            logHide (str) {
                // console.log("on-hide", str);
            },
            logShow (str) {
                // console.log("on-show", str);
            },
            opensite(bool) {
                this.isSite = bool
                if(!bool) {
                    this.birthVal = this.birthVal1
                }
                event.stopImmediatePropagation()
            },
            change(value) {
                this.pickerValue1 = value;
            },
            onValuesChange(picker, values) {
                this.birthVal1 = values[0];
            },
            siteChange(picker) {
                for(let i=0;i<this.provinceData.length;i++){
                    if(this.provinceData[i].areaName == picker[0]){
                        this.siteId = this.provinceData[i].areaId
                    }
                }
            },
            newCont() { // 新建八字
                let _this = this;
                if(this.namea !== '' && this.siteId !== '' && this.cityId !== '' && this.addTit !== '' && this.sex !== '' && this.pickerValue1 !== '' && this.birthVal !== '') {
                    let params = {
                        name: this.namea, // 姓名
                        aresId1: this.cityId[0], // 省份id
                        areaId2: this.cityId[1], // 市级id
                        areaName: this.addTit, // 地址
                        sex: this.sex == '男' ? 1 : 2, // 性别
                        birthday: this.pickerValue1, // 生日日期
                        birthTime: this.birthVal, // 生日时辰
                        userId: this.$store.state.userId, // 用户id
                        id: this.$route.query.id
                    }
                    this.$http.fetchGet('baziadd', params).then((res) => {
                        if(res.code == 200) {
                            _this.$vux.toast.text('添加成功')
                            _this.$router.push({//你需要接受路由的参数再跳转
                                path: '/my'
                            })
                        }
                    }, (err) => {
                        console.log(err)
                    })
                } else {
                    this.$vux.toast.text('请填写完整信息')
                }
            },
            getBaziInfo() {
                if(this.$route.query.id != 0){
                    this.$http.fetchGet('getBaziInfo', {
                        userId: this.$store.state.userId,
                        id: this.$route.query.id
                    }).then(res => {
                        if(res.code == 200) {
                            this.namea = res.data.name;
                            this.sex = res.data.sex == 1 ? '男' : '女';
                            this.pickerValue1 = res.data.birth;
                            this.birthVal = res.data.birthTime;
                            this.addTit = res.data.areaName;
                            this.city[0] = res.data.areaId1;
                            this.city[1] = res.data.areaId2;
                        } else {
                            console.log(res)
                        }
                    }, err => {
                        console.log(err)
                    })
                }
            }
        },
        mounted() {
            this.getBaziInfo()
        }
    }
</script>

<style lang="less" scoped>
    .horoscope{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        .import{
            .padd(0, 20);
            li{
                position: relative;
                .pl(130);
                .h(90);
                .lh(90);
                border-bottom: 1px solid #f2f2f2;
                span{
                    position: absolute;
                    left: 0;
                    color: #020202;
                }
                input{
                    &:focus {
                        outline:none;
                    }
                    width: 100%;
                    .h(70);
                    border: none;
                    color: #666;
                }
                p{
                    width: 100%;
                    .h(70);
                    border: none;
                    color: #666;
                }
                .dizhi{
                    position: absolute;
                    top: 0;
                    left: 70px;
                    opacity: 0;
                }
            }
        }
        .preserve{
            position: fixed;
            bottom: 0;
            width: 100%;
            box-sizing: border-box;
            text-align: center;
            background: #fff;
            .padd(0, 20);
            .pb(80);
            z-index: 9;
            button{
                .mb(30);
                width: 100%;
                .h(88);
                color: #fff;
                border: 0;
                border-radius: 10px;
                background: #189BEB;
            }
            p{
                color: #666;
            }
        }
        .timeData{
            width: 100%;
            background: #fff;
            .pb(20);
            p{
                width: 100%;
                .h(88);
                display: flex;
                span{
                    flex: 1;
                    text-align: center;
                    .lh(88);
                    border-bottom: 1px solid #f2f2f2;
                    &:last-child{
                        border-left: 1px solid #f2f2f2;
                    }
                }
            }
        }
        .sexData{
            width: 100%;
            background: #fff;
            .pb(40);
            p{
                .pl(20);
                .lh(48);
            }
            ul{
                li{
                    .lh(50);
                    text-align: center;
                    border-bottom: 1px solid #f2f2f2;
                    &:last-child{
                        border: none;
                    }
                }
            }
        }
    }
</style>
<style>
    .mint-popup{
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    .picker-item{
        font-size: 14px;
    }
    .picker-toolbar{
        line-height: 60px;
        height: 60px;
    }
    .mint-datetime-action{
        line-height: 60px;
        font-size: 14px;
    }
</style>
